<template>
  <el-dialog
    :visible.sync="isRecord"
    width="500px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
    class="market_record"
  >
    <div slot="title" class="title_close">
      <!-- 购买记录 -->
      <div class="title">{{ $t('account_dialog.market_record.57km1lpsybk0') }}</div>
      <img src="@/assets/img/icon_gb1.png" class="close" @click="hide" />
    </div>
    <!-- 筛选条件 -->
    <div class="record_list">
      <div class="option">
        <el-date-picker
          v-model="recordDate"
          type="daterange"
          @change="handechange"
          :picker-options="pickerOptions"
          :unlink-panels="true"
          value-format="yyyyMMdd"
          range-separator="-"
          :start-placeholder="$t('account_dialog.exchange_record.56hu3ybhv0w0')"
          :end-placeholder="$t('account_dialog.exchange_record.56hu3ybhvbk0')"
        >
        </el-date-picker>
        <el-select v-model="recordform.accountType" :placeholder="$t('account_dialog.capital_flow.56hr0o2kbu80')">
        <el-option
          v-for="item in AccountList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
        <el-select v-model="recordform.type" @change="changeType" class="type_select">
          <el-option
            v-for="(item, index) in statusList"
            :key="index"
            :label="item.name"
            :value="item.status"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 购买记录列表 -->
      <div v-for="(item,index) in goodsList" :key="index" class="goods_list">
        <!-- 商品名 -->
        <div class="goods_name">
          <div>
            <span>{{`${item.type} ${item.level} `}}</span>
            <span v-if="item.level == 'L1'">{{$t('account_dialog.market_record.57km1lpsz9s0')}}</span>
            <span v-if="item.level == 'L2'">{{$t('account_dialog.market_record.57km1lpszjo0')}}</span>
            </div>
            <div :class="item.state == 1 ? 'state_blue' : 'state_grey'">{{item.state | QuotationStatus(te)}}</div>
        </div>
        <!-- 天数 -->
        <div class="goods_item">
          <span class="item_name">{{$t('account_dialog.market_record.57km1lpszrk0')}}</span>
          <span class="item_value">{{item.day}}{{$t("m.Day")}}</span>
        </div>
        <!-- 金额 -->
        <div class="goods_item">
          <span class="item_name">{{$t('account_dialog.market_record.57km1lpt0200')}}</span>
          <span class="item_value">{{item.buy_amount}}</span>
        </div>
        <!-- 币种 -->
        <div class="goods_item">
          <span class="item_name">{{$t('account_dialog.market_record.57km1lpt0cw0')}}</span>
          <span class="item_value">{{item.charge_currency}}</span>
        </div>
        <!-- 购买终端 -->
        <div class="goods_item">
          <span class="item_name">{{$t('account_dialog.market_record.57km1lpt0ls0')}}</span>
          <span class="item_value">{{item.platform}}</span>
        </div>
        <!-- 有效期 -->
        <div class="goods_item">
          <span class="item_name">{{$t('account_dialog.market_record.57km1lpt0uk0')}}</span>
          <span class="item_value">{{item.create_time | date}}-{{item.expire_time | date}}</span>
        </div>
      </div>
      <div v-if="goodsList.length <= 0" class="zanwu"></div>
    </div>
  </el-dialog>
</template>
<script>
import {get_shop_record} from '@/assets/js/API/active.js';
import dayjs from "dayjs";
export default {
  props: {
    isRecord: Boolean,
  },
   filters: {
    date(val) {
      return dayjs(val * 1000).format("YYYY.MM.DD");
    },
   },
  data() {
    return {
      recordform: {
        accountType: "", //1:A股通 2:港股 3:美股 不传即所有
        startDate: "",
        endDate: "",
        type: "", // 1: 使用中，2：已过期。不传即所有
      }, // 兑换表单
      recordDate: null,
      pickerOptions: {
        disabledDate(time) {
          const end = new Date();
          return time.getTime() >= end;
        }, // 时间选择器范围为最多为本日
      },
      statusList: [
        {
          name: this.$t('account_dialog.market_record.57km1lpt12g0'),
          status: 1,
        },
        {
          name: this.$t('account_dialog.market_record.57km1lpt1m80'),
          status: 2,
        },
        {
          name: this.$t("account_dialog.exchange_record.56hu3ybhxzg0"),
          status: "",
        },
      ], // 状态列表
      AccountList: [
        {
          label: this.$t('account_dialog.market_record.57km1lpt1vk0'),
          value: "",
        },
        {
          label: this.$t('account_dialog.market_record.57km1lpt23g0'),
          value: 2,
        },
        {
          label: this.$t('account_dialog.market_record.57km1lpt2aw0'),
          value: 3,
        },
        {
          label: "A股通",
          value: 1,
        },
      ], // 市场选择
      goodsList: [], // 商品列表
    };
  },
  methods: {
    hide() {
      this.$emit("hideRecord");
    },
    // 改变日期
    handechange(val) {
      if (val == null) return;
      this.goodsList = [];
      this.recordform.startDate = val[0];
      this.recordform.endDate = val[1];
      this.shopRecords(this.recordform);
    },
    // 改变状态
    changeType(val) {
      this.goodsList = [];
      this.recordform.type = val;
      this.shopRecords(this.recordform);
    },
    // 购买记录
    async shopRecords(sumbit) {
      const res = await get_shop_record({
          ...sumbit
        });
      if(res.code != 1) return this.$message.error(res.msg);
      this.goodsList = res.data.list;
    }
  },
};
</script>
<style lang="less">
.market_record {
  .type_select {
    padding-left: 12px;
    padding-right: 0;
  }
  .goods_list {
    max-height: 720px;
    padding-top: 30px;
    padding-bottom: 16px;
    border-bottom: 1px solid @LightBorderLine;
    .goods_name {
      font-size: 14px;
      color: @fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .state_blue {
        color: @hoverColor;
      }
      .state_grey {
        color: @fbSix;
      }
    }
    .goods_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      .item_name {
        color: @fbSix;
      }
      .item_value {
        color: @fff;
      }
    }
  }
}
</style>